import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

export default class App extends Component {
	//初始化状态
	state = {
		todos:[
			{id:'001',title:'吃饭',done:true},
			{id:'002',title:'睡觉',done:false},
			{id:'003',title:'学习',done:true},
			{id:'004',title:'喝酒',done:false}
		]
	}
	render() {
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List {...this.state} checkTodo={this.checkTodo} deleteTodo={this.deleteTodo}/>
					<Footer/>
				</div>
			</div>
		)
	}
	//添加一个todo
	addTodo = (todoObj)=>{
		//获取之前的todos
		const {todos} = this.state
		//更新
		this.setState({todos:[todoObj,...todos]})
	}
	//勾选 or 取消勾选
	checkTodo = (id,done)=>{
		//加工todos
		const nTodos = this.state.todos.map((todoObj)=>{
			if(id === todoObj.id) todoObj.done = done
			return todoObj
		})
		//更新
		this.setState({todos:nTodos})
	}
	//删除一个doto
	deleteTodo = (id)=>{
		const nTodos = this.state.todos.filter( todoObj => todoObj.id !== id)
		this.setState({todos:nTodos})
	}
}
